import React, { Component } from 'react';
import './transition3.css'
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';

class Transition3 extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { name: 'oppo' },
        { name: 'huawei' },
        { name: 'mi' }
      ]
    }
  }
  del(index) {
    let arr = this.state.list;
    arr.splice(index, 1);
    this.setState({
      list: arr
    })
  }
  render() {
    return (
      <>
        <ul>
          <TransitionGroup>
            {
              this.state.list.map((item, index) => {
                return (
                  <CSSTransition
                    key={item.name}
                    timeout={500}
                    classNames="item"
                  >
                    <li className="li">
                      <button className="remove-btn" onClick={() => this.del(index)}>X</button>
                      {item.name}
                    </li>
                  </CSSTransition>
                )
              })
            }
          </TransitionGroup>
        </ul>
      </>
    );
  }
}

export default Transition3;
